<template>
  <div class="parent">
    <h3>父组件</h3>
		<h4>我的房产数量：{{houseNum}}</h4>
		<button @click="test1">点我把子组件1的玩具数量+1</button>
		<button @click="test2">点我把子组件2的游戏数量-10</button>
		<button @click="test3">让所有孩子，多读10本书</button>
    <Child1 ref="c1"/>
    <Child2 ref="c2"/>
  </div>
</template>

<script>
import Child1 from './Child1'
import Child2 from './Child2'

export default {
  name: 'Index',
	components: {Child1,Child2},
	data() {
		return {
			houseNum:10
		}
	},
	methods: {
		test1(){
			this.$refs.c1.toyNum += 1
		},
		test2(){
			this.$refs.c2.gameNum -= 10
		},
		test3(){
			this.$children.forEach((item)=>{
				item.bookNum += 10
			})
		}
	},
}
</script>

<style lang="less" scoped>
	.parent{
		background-color: rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
		button{
			margin-bottom: 10px;
			margin-left: 10px;
		}
	}
</style>

